<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scrollbar</title>
  </head>
  <style>
    .out {
      height: 200px;
      width: 600px;
      padding: 10px;
      background-color: rgb(109, 149, 174);
      overflow-y: scroll;

      -webkit-scrollbar-width: thin;
    }
    .out::-webkit-scrollbar {
      /* 整个滚动条。 */
      /* display: none; */
      /* background-color: transparent; */

      
      width: 35px;


    }
 
    .out::-webkit-scrollbar-button {
      /* 上下按钮 */
      height: 20px;
      width: 20px;
    }
    .out::-webkit-scrollbar-thumb {
      /* 滑块 */
      background: #000;
      height: 8px;
    }

    .out::-webkit-scrollbar-track {
      /* 滚动条轨道 */
      opacity: 1;
    }
    .out::-webkit-scrollbar-track-piece {
      /* 滚没有滑块的轨道部分 */
      /* background-color: blue; */
    }
    .out::-webkit-scrollbar-corner {
      /* 垂直和水平交汇处 */
    }
    .out::-webkit-resizer {
      /* 出现在某些元素底角的可拖动调整大小的滑块 */
    }
    .inner {
      height: 1200px;
      background-color: aqua;
    }
  </style>
  <body>
    <div class="out">
      out
      <div class="inner">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>0</p>
        <p>0</p>
        <p>2</p>
      </div>
    </div>
  </body>
</html>
